<template>
    <div class="container-main">
        <!-- 头部 -->
        <div class="container-header">
            <nav-header 
            :ceiling="headerCeiling?headerCeiling:false" 
            :default-active="$route.path" 
            :menu-list="menuList" 
            :color="headerColor?headerColor:null"
            :ceiling-color="headerCeilingColor"
            :regular="headerRegular"
            
            >
                
             <template v-slot:logo>
                <div class="logo" @click="gotoIndex">
                    知行互联
                </div>
             </template >
             <template v-slot:ability>
                <div :class="'ability-item '+($route.path==ability.router?'active':'')" @click="gotoPage(index)" v-for="(ability,index) in abilityList" :key="index">
                   {{ ability.name }}
                </div>
             </template>
            </nav-header>
        </div>
        <div class="container-body">
            <slot name="content">

            </slot>

        </div>
        <!-- 页尾 -->
        <div class="container-footer">
            <nav-footer :site="site" 
            :color="footerColor?footerColor:null" 
            :regular="footRegular?footRegular:false">
            </nav-footer>
        </div>
    </div>
</template>

<script>

import NavHeader from '@/components/plugs/nav-header/NavHeader';
import NavFooter from '@/components/plugs/nav-footer/NavFooter';

export default {
    data(){
        return{
            site:{
                ICP:'粤ICP备17012055号-2',
                text:'SNS',
                contactList:[
                    {icon:'el-icon-message',info:'446715229@qq.com'}
                ]
            },
            menuList:[
                {router:'/index',name:'首页'},
                {router:'/blog',name:'博客'},
                {router:'/match',name:'竞赛'},
                {router:'/about',name:'关于'},
                // {router:'/contact',name:'联系我们'},
               
                // {router:'/search',name:'搜索'}
            ],
            abilityList:[
                {router:'/center',name:'个人中心'}
            ],
            logo:{
                router:'/',
                icon:'',
                text:''
            }
        }
    },
    props:['headerRegular','headerCeiling','headerColor','headerCeilingColor','footRegular','footerColor'],
    methods:{
        gotoPage(index){
            this.$router.push(this.abilityList[index].router);
        },
        gotoIndex(){
            this.$router.push(this.logo.router);
        }


    },
    created(){
        // console.log('路由',this.$route.path);
       

    },
    components:{
        'nav-header':NavHeader,
        'nav-footer':NavFooter
    }

}
</script>

<style lang="scss" scoped>
.container-main{
    overflow: hidden;
    background-color: #fff;
    min-height: 100vh;
}
.container-header{
    width: 100%;
    // position: absolute;
    // z-index: 99;
    // top: 0;
    // padding: 15px 0;
}
.container-body{
    width: 100%;
}
.container-footer{
    width: 100%;
}

.logo:hover{
    cursor: pointer;
}
.ability-item:hover{
    cursor: pointer;
    color: #FF9B00;
}
.active{
    color: #FF9B00;
}
</style>

